<template>
    <div>
        <!-- 按钮 -->
        <el-button type="primary" icon="el-icon-plus" style="margin: 10px 0px" @click="showDialog">添加</el-button>
        <!-- 表格组件 -->
        <!-- table属性
            data:表格组件将来需要展示的数据---数组类型
            border:给表格添加边框
        -->
        <!-- column属性
            label:显示标题
            width:对应列的宽度
            align:标题的对齐方式
            prop:对应列内容的字段名
        -->
        <el-table style="width: 100%" border :data="pageList.records">
            <!-- 第一列 ：序号 -->
            <el-table-column prop="date" label="序号" width="80px" align="center" type="index"></el-table-column>
            <!-- 第二列 ：品牌名称 -->
            <el-table-column prop="tmName" label="品牌名称"></el-table-column>
            <!-- 第三列 ：品牌LOGO -->
            <el-table-column prop="logoUrl" label="品牌LOGO">
                <!-- 作用域插槽 row代表每一条数据 -->
                <template slot-scope=" {row,$index}">
                    <img
                        :src='row.logoUrl'
                        alt="" style="width: 100px;height: 100px"
                        :onerror="defaultImg"
                    >
                </template>
            </el-table-column>
            <!-- 第四列 ：操作 -->
            <el-table-column prop="age" label="操作">
                <template slot-scope=" {row,$index}">
                    <el-button type="warning" icon="el-icon-edit" size="mini" @click="updateTradeMark(row)">修改
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteTrademark(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--
            分页器:
                当前第几页:current-page=""、数据总条数:total=""、每一页展示数据:page-size=""
                :page-sizes代表可以设置每一页展示多少条数据
                background:属性可以为分页按钮添加背景色
                :pager-count="" 按钮的数量，如果是7，连续页码数是5
                layout:表示需要显示的内容（实现分页器的布局）    prev:表示上一页      pager:表示页码列表      next:为下一页
        -->
        <!-- 分页器 -->
        <el-pagination
            style="margin-top: 20px;text-align: center"
            background
            :current-page="this.page"
            :page-size="this.limit"
            :page-sizes="[3,10,20]"
            :pager-count="7"
            :total="pageList.total"
            @size-change="handleSizeChange"
            @current-change="getPageList"
            layout="prev, pager, next, jumper,->,sizes,total "
        >
        </el-pagination>
        <!--
            点击添加弹出对话框
            :visible.sync --- 控制对话框显示与隐藏用的
            Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
        -->
        <!-- 添加及修改对话框 -->
        <el-dialog :title="isAddOrUpdate==='update'?'修改品牌':'添加品牌'" :visible.sync="dialogFormVisible">
            <!-- form表单 -->     <!-- :model属性，这个属性的作用是，把表单的数据收集到哪个对象身上，将来表单验证，也会用到这个属性  -->
            <el-form style="width: 80%" :model="tmForm" :rules="rules" ref="ruleForm">
                <!-- 需要上传的品牌名称 -->
                <el-form-item label="品牌名称" label-width="100px" prop="tmName">
                    <el-input autocomplete="off" v-model="tmForm.tmName"></el-input>
                </el-form-item>
                <!-- 需要上传的品牌LOGO -->
                <!-- 这里收集数据，不能使用v-model，因为他不是表单元素-->
                <!--
                    action: 设置图片上传的地址
                    :on-success： 可以检测到图片上传成功，当图片上传成功，会执行一次
                    :before-upload： 可以在上传图片之前，执行一次
                -->
                <el-form-item label="品牌LOGO" label-width="100px" prop="logoUrl">
                    <el-upload
                        class="avatar-uploader"
                        action="/dev-api/admin/product/fileUpload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div slot="tip" class="el-upload__tip">只能上传jpg文件，且不超过2MB</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrUpdateTradeMark">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "TradeMark",
    data() {
        return {
            // 分页器，显示第几页，默认在第1页
            page: 1,
            // 每页展示的数据
            limit: 3,
            // 服务器返回的数据     // 一共有几页：   pageList.pages
            pageList: '',
            // 服务器返回的图片显示不出来时换成默认的图片
            defaultImg: 'this.src="' + require('../../../assets/error.png') + '"',
            // 控制对话框显示与隐藏，默认隐藏
            dialogFormVisible: false,
            // 收集品牌的信息,对象里面的属性不能瞎写，需要看文档，返回给服务器的是什么就怎么写
            tmForm: {
                tmName: '',
                logoUrl: ''
            },
            // 判断用户点击的是添加按钮还是修改按钮，如果为add，代表是点击的是添加按钮，update是修改按钮
            isAddOrUpdate: '',
            ruleForm: {
                tName:'',
                tLogo:''
            },
            // 表单校验规则
            rules: {
                // required：必须要校验字段（前方会出现*）， message：提示信息， trigger：用户的行为设置（事件的设置blur:失焦，    change：文本发生变化）
                // 品牌名称
                tmName:[
                    { required: true, message: '请输入品牌名称', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'change' }
                ],
                // 品牌logo
                logoUrl:[
                    { required: true, message: '请选择品牌图片'}
                ]
            }
        }
    },
    mounted() {
        // 获取品牌列表数据的方法
        this.getPageList()
    },
    methods: {
        // 获取品牌列表数据
        async getPageList(pager = 1) {
            this.page = pager
            // 解构出参数
            const {page, limit} = this
            // 获取品牌列表的接口    向服务器发请求的时候，这个函数需要带参，因此在data中初始化两个字段，代表给服务器传递参数
            let result = await this.$API.trademark.reqTradeMark(page, limit)
            // console.log(result)
            if (result.code == 200) {
                this.pageList = result.data
            }
        },
        // 点击哪一页就跳到哪一页// 用getPageList
       /* handleCurrentChange() {
            // console.log(page)   // 点分页器的几就打印几
            // this.page = pager
            this.getPageList()
        },*/
        // 当某一页数据展示数量发生变化时会调用
        handleSizeChange(limitt) {
            // console.log(limitt)     // 选中多少，就会打印多少
            this.limit = limitt
            this.getPageList()
        },
        // 点击添加品牌的按钮
        showDialog() {
            // 显示对话框
            this.dialogFormVisible = true
            // 每次显示对话框的时候，要清空里面内容
            this.tmForm.logoUrl = ''
            this.tmForm.tmName = ''
            this.isAddOrUpdate = 'add'
        },
        // 修改某一个品牌的数据
        updateTradeMark(row) {
            // 显示对话框
            this.dialogFormVisible = true
            // row 就是当前选中的这个品牌信息
            // console.log(row)
            // 将已有的品牌信息赋值给 tmForm进行展示
            // 将服务器返回品牌的信息，直接赋值给 TMForm 进行展示。
            // 也就是 tmForm 存储即为服务器返回品牌信息，如果不用浅拷贝的话，点击修改按钮之后，只要一修改就会修改数据，点取消也会修改
            // 这里需要用到浅拷贝
            this.tmForm = {...row}
            this.isAddOrUpdate = 'update'
        },
        // 上传图片成功
        handleAvatarSuccess(res, file) {
            // res 是上传成功之后返回给前端的数据
            // console.log(res)    // {code: 200, message: '成功', data: 'http://139.198.127.41:9000/sph/20220513/error.jpg', ok: true}
            // file 是上传成功之后返回给前端的数据,数据比较详细
            // console.log(file)
            // 收集品牌图片数据
            this.tmForm.logoUrl = res.data
        },
        // 图片上传之前，判断上传的图片格式及大小
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // 点击确定，发请求给服务器
        addOrUpdateTradeMark() {
            // 当所有验证字段全部通过了，再写业务逻辑
            this.$refs.ruleForm.validate(async (success) => {
                // console.log(success)     // fales    true
                // 如果全部字段符合条件
                if (success) {
                    // 隐藏对话框
                    this.dialogFormVisible = false
                    // 点击的是添加按钮弹出得对话框
                    if (this.isAddOrUpdate === 'add') {
                        // 发请求
                        let addResult = await this.$API.trademark.reqAddTraderMark(this.tmForm)
                        // console.log(addResult)
                        if (addResult.code == 200) {
                            // 修改成功之后，弹出信息提示
                            this.$message({
                                message: '添加品牌成功!',
                                type: 'success'
                            })
                        }else {
                            this.$message.error('上传失败！');
                        }
                    }
                    // 点击的是 修改 按钮弹出得对话框
                    if (this.isAddOrUpdate === 'update') {
                        let updateResult = await this.$API.trademark.reqUpdateTradeMark(this.tmForm)
                        if (updateResult.code == 200) {
                            // 修改成功之后，弹出信息提示
                            this.$message({
                                message: '修改品牌成功!',
                                type: 'warning'
                            })
                        }else {
                            this.$message.error('修改失败！');
                        }
                    }
                    // 再次获取品牌列表进行展示     去到新添加的那一页
                    /*console.log(this.page)
                    console.log(this.pageList)
                    console.log(this.pageList.pages)*/
                    // 如果最后一页展示的数量大于
                    /*if (this.pageList.pages.records.length == this.limit){
                        this.getPageList(this.pageList.pages + 1)
                    }else {
                        this.getPageList(this.page)
                    }*/
                    this.getPageList(this.page==this.pageList.pages?this.page:this.pageList.pages)
                // 校验不通过
                } else {
                    // console.log('error submit!!');
                    this.$message.error('请输入要填写的信息！');
                    return false;
                }
            })
        },
        // 删除品牌
        deleteTrademark(row) {
            // console.log(row)     // 选中的那条数据
            this.$confirm(`确定删除:${row.tmName},这条品牌数据吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then( async() => {
                // 点击确定按钮的时候会触发
                // 向服务器发删除请求
                let dResule = await this.$API.trademark.reqDeleteTradeMark(row.id)
                // console.log(dResule)
                // 删除成功
                if (dResule.code==200) {
                    // 小弹窗提示
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                } else {
                    return Promise.reject(new Error('删除失败！'))
                }
                // 重新获取服务器数据    当前页展示的数据如果大于1,，就还在当前页，如果小于1，跳到前一页
                this.getPageList(this.pageList.records.length > 1?this.page:this.page-1)
                this.pages = this.pageList.pages
                // console.log(this.pageList.records.length)
            }).catch(() => {
                // 点击取消按钮的时候会触发
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
